<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<div class="live-demo-wrap">
    <h2>Tile</h2>
    <div class="demo-1 live-demo">
        <h3>单选/多选</h3>
        <j-tile [multipleSelect]="multipleSelect" trackItemBy="label" [selectedItems]="selectedItems1" (selectedItemsChange)="handleSelect($event)">
            <j-tile-option *ngFor="let city of citys" [value]="city">
                {{city.label}}
            </j-tile-option>
        </j-tile>
        <div class="toggle">
            <label>切换多选：</label>
            <j-switch [(checked)]="multipleSelect" (checkedChange)="clearSelectedItems()"></j-switch>
        </div>
        <p class="message">选中的条目是: <span>{{selectedItemsStr1}}</span></p>
    </div>
    <div class="demo-2 live-demo">
        <h3>有初始选中值</h3>
        <j-tile [multipleSelect]="true"
                     trackItemBy="label"
                     [selectedItems]="selectedItems2"
                     (selectedItemsChange)="handleSelect2($event)">
            <j-tile-option *ngFor="let city of citys" [value]="city">
                {{city.label}}
            </j-tile-option>
        </j-tile>

        <p class="message">选中的条目是: <span>{{selectedItemsStr2}}</span></p>
    </div>
    <div class="demo-3 live-demo">
        <h3>不可点击</h3>
        <j-tile [multipleSelect]="true"
                     trackItemBy="label"
                     [selectedItems]="selectedItems3"
                     (selectedItemsChange)="handleSelect3($event)">
            <j-tile-option *ngFor="let city of citys" [value]="city" [disabled]="city.disabled">
                {{city.label}}
            </j-tile-option>
        </j-tile>

        <p class="message">选中的条目是: <span>{{selectedItemsStr3}}</span></p>
    </div>
</div>
